<template>
  <div class="box">
    <div class="top">
      <div class="logo">
        <img src="1.jpg" alt="" />
      </div>

      <div class="form">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item prop="username">
            <el-input :prefix-icon="User" v-model="ruleForm.username" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input :prefix-icon="Lock" v-model="ruleForm.password" />
          </el-form-item>
          <el-form-item>
            <el-button
              style="margin-top: 10px"
              type="primary"
              @click="submitForm(ruleFormRef)"
            >
              登录
            </el-button>
            <el-button style="margin-top: 10px" @click="resetForm(ruleFormRef)"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { User, Lock } from "@element-plus/icons-vue";
import { getLogin } from "../utils/api";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const data = reactive({});
const ruleForm = reactive({
  username: "admin",
  password: "123456",
});
const ruleFormRef = ref();
const rules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 3, max: 8, message: "请输入3到8个字符", trigger: "blur" },
  ],
});

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      getLogin(ruleForm).then((res) => {
        console.log(res);
        if (res.data.meta.status == 200) {
          ElMessage({
            showClose: true,
            message: res.data.meta.msg,
            type: "success",
          });
          localStorage.setItem('token',res.data.data.token)
          router.push('/welcome')
        }else{
          ElMessage({
            showClose: true,
            message: res.data.meta.msg,
            type: "error",
          });
        }
      });
    } else {
      console.log("error submit!", fields);
      ElMessage({
            showClose: true,
            message: '用户名和密码不能为空',
            type: "error",
          });
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style lang='scss' scoped>
.box {
  width: 100vw;
  height: 100vh;
  background-color: #2a4b6a;
  display: flex;
  align-items: center;
  justify-content: center;
  .top {
    width: 450px;
    height: 304px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 6px 0 #ccc;
    position: relative;
    padding: 0 70px;
    box-sizing: border-box;
    .logo {
      width: 130px;
      height: 130px;
      background-color: #fff;
      box-shadow: 0 0 6px 0 #ccc;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: -25%;
      padding: 10px;
      box-sizing: border-box;
      transform: translate(-50%, 0);
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .form {
      margin-top: 100px;
      ::v-deep .el-form-item__content {
        display: flex;
        justify-content:flex-end;
      }
    }
  }
}
</style>
